<template>
  <div class="lang_box">
    <!-- 语言切换 -->
    <div class="btns">
      <div class="zh" @click="goToCn()">中文</div>
      <div class="mon" @click="goToMn()"> 
        <span class="mon_text">ᠠ</span> <span class="icon"> / </span> <span class="mon_text"> ᠡ </span> 
      </div>
    </div> 
  </div>
</template>

<script>
  export default {
    name: 'langCom',
    data() {
      return {}
    },
    methods: {
      goToCn() {
        window.location.href = 'http://10.60.63.131/lib/zh/#/'
      },
      goToMn() {
        window.location.href = 'http://10.60.63.131/lib/mn/#/'
      }
    }
  }
</script>

<style lang="less" scoped>
  .lang_box {
    width: 100%;
    height: 50px;
    text-align: center;
    position: relative;
    position: absolute;
    top: 0;
    z-index: 99999;
    // border: 1px solid #000;

    .btns {
      width: 150px;
      border: 1px solid #74a5ff;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border-top: none;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .zh, .mon {
        width: 50%;
        // padding: 2px;
        border: none;
        float: left;
      }
      .zh {
        background-color: #74a5ff;
        color: #fff;
        border: 1px solid #74a5ff;
        border-bottom-left-radius: 10px;
        text-align: center;
      }
      .zh:hover {
        cursor: pointer;
      }
      .mon {
        color: #74a5ff;
        font-size: 14px;
        
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #fff;
        border-bottom-right-radius: 10px;

        span {
          float: left;
        }

        .mon_text {
          writing-mode: vertical-lr;
          font-size: 20px;
          font-weight: 600;
        }
      }
      .mon:hover {
        cursor: pointer;
      }
    }
  }
</style>